import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button, Checkbox, Form, Input } from 'antd'
import { fetchLogin } from 'api/index'
import { UploadFile, Article } from 'components'

const App: React.FC = () => {
  const navigate = useNavigate()

  const onFinish = async (values: any) => {
    const response = await fetchLogin(values)
    console.log('response:', response)
    // console.log('Success:', values)
    // const data = await axios.post('http://localhost:3000/api/login', values)
    // console.log('data:', data.data.data)
    // localStorage.setItem('token', data.data.data)
    // navigate('/basic/dashboard')
  }

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo)
  }

  // const fetchUser = async () => {
  //   const data = await axios.get('http://localhost:3000/api/users')
  //   console.log('data:', data)
  // }

  useEffect(() => {
    // fetchUser()
  }, [])
  return (
    <>
      <Article></Article>
      <hr />
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label="Username"
          name="username"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="Password"
          name="password"
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          name="remember"
          valuePropName="checked"
          wrapperCol={{ offset: 8, span: 16 }}
        >
          <Checkbox>Remember me</Checkbox>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
      <UploadFile></UploadFile>
    </>
  )
}

export default App
